<template>
  <!-- 互联代售  配置货源 添加供货店铺 -->
  <div >
    <el-dialog title="添加供货人" @close="close" :visible.sync="visibleValue" width="880px" append-to-body>
      <el-form style="padding-bottom: 60px;" class="form-box new_form_box" ref="form2" :model="form" :rules="rules" :inline="true">
        <el-form-item label="店铺" prop="superTenantId">
          <el-select @change="shopChange" v-model="form.superTenantId" placeholder="请选择店铺" clearable filterable size="small">
            <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
          </el-select>
        </el-form-item>
        <!-- 店铺下所有游戏账号数量 -->
        <el-form-item label="" prop="" class="row" v-if="form.superTenantId">
          <div class="goods-num ">
            <div class="flex goods-num-inner" v-if="gameNumList&&gameNumList.length">
              <span v-for="(item,i) in gameNumList" :key="i">
                {{ item.gameName }}：
                <b>{{ item.cot }}</b>
              </span>
            </div>
            <div style="color: #666;text-align: center;" v-if="form.superTenantId&&(!gameNumList||gameNumList.length==0)">
              该店铺暂无商品！
            </div>
          </div>
        </el-form-item>
        <el-form-item label="供货人：" prop="userArr" class="row addKefu">
          <div style="margin-bottom: 10px;">
            <myCheckbox @change="allCheckChange" v-model="allCheck" :list="[{id:2,name:'选择全部'}]"></myCheckbox>
          </div>
          <div >
            <myCheckbox @change="userChange" v-model="form.userArr" :list="personList" :option="{valueKey: 'userId',labelKey: 'nickName',}"></myCheckbox>
          </div>
        </el-form-item>
        <div class="center">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-form>

    </el-dialog>

  </div>
</template>

<script>
import {
  hulianSelectPushAllList,
  hulianSelectPushGameCot,
} from "../../../api/tenantApis/tenantManage";
export default {
  name: "",
  components: {},
  data() {
    return {
      visibleValue: false,
      form: {
        superTenantId: "",
        superTenantName: "",
        superId: "",
        superName: "",
        userArr: [],
      },
      rules: {
        superTenantId: [
          { required: true, message: "请选择店铺", trigger: "change" },
        ],
        userArr: [
          { required: true, message: "请选择供货人", trigger: "change" },
        ],
      },
      selectGameNames: [],
      gameNumList: [],

      personList: [],
      allCheck:[]
    };
  },
  created() {},
  computed: {
    allGameList() {
      return this.$store.getters.allGameList;
    },
    tenantList() {
      return this.$store.getters.tenantList;
    },
  },
  methods: {
    open(data) {
      this.personList = []
      this.gameNumList = []
      this.visibleValue = true;
      this.allCheck = []
      if(data){
        // 回显已勾选
        this.form = {...data}
        if(this.form.superId){
          const userArr = this.form.superId.split(',')
          userArr.forEach((r,i)=>{
            userArr[i] = Number(r)
          })
          this.form.userArr = userArr
        }
        this.shopChange(this.form.superTenantId)
      }
    },
    // 选择店铺
    shopChange(e) {
      this.allCheck = []
      if (e) {
        this.tenantList.forEach((r) => {
          if (r.tenantId == e) {
            this.form.superTenantName = r.tenantName;
          }
        });
        this.getGoodsNumByShop();
        this.getPersonListByShop();
      }
    },
    // 查询店铺下所有商品
    getGoodsNumByShop() {
      this.gameNumList = [];
      hulianSelectPushGameCot({
        tenantId: this.form.superTenantId,
      }).then((res) => {
        this.gameNumList = res.data;
      });
    },
    // 查询店铺下所有员工
    getPersonListByShop() {
      hulianSelectPushAllList({
        tenantId: this.form.superTenantId,
        userNewType: 1,
      }).then((res) => {
        this.personList = res.data;
      });
    },
    // 员工全选
    allCheckChange(e){
      this.form.userArr = []
      this.form.superId = ''
      this.form.superName = ''
      let superName = []
      if(this.allCheck.length){
        this.personList.forEach(r=>{
          this.form.userArr.push(r.userId)
          superName.push(r.nickName);
        })
      }
      this.form.superId = this.form.userArr.join(",")
      this.form.superName =  superName.join(',')
    },

    // 选择员工改变
    userChange(e) {
      this.form.superName = [];
      this.form.superId = ''
      if (this.form.userArr && this.form.userArr.length) {
        this.form.superId = this.form.userArr.join(",");
        this.personList.forEach((user) => {
          if (this.form.userArr.includes(user.userId)) {
            this.form.superName.push(user.nickName);
          }
        });
      }
      this.form.superName =  this.form.superName.join(',')
    },
    submitForm() {
      this.$refs.form2.validate((valid) => {
        if (valid) {
          this.$emit("success", JSON.parse(JSON.stringify(this.form)));
          this.close()
        } else {
          this.$message.error("请填写完整！");
        }
      });
    },

    // 表单重置
    reset() {
      this.$refs.form2.resetFields();
    },
    close(){
      this.reset()
      this.visibleValue = false;
    },
    cancel() {
      this.visibleValue = false;
    },
  },
};
</script>
<style  lang="scss" scoped>
.goods-num {
  min-height: 40px;
  .goods-num-inner {
    flex-wrap: wrap;
    padding-top: 15px;
  }
  span {
    background-color: #ebeff8;
    padding: 1px 15px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    flex-wrap: wrap;
    white-space: nowrap;
  }
}

.addKefu {
  padding-bottom: 20px;
  ::v-deep .checkbox-item {
    width: 150px;
    background: #ebeff8;
    border-radius: 4px;
    overflow: hidden;
    padding-left: 8px;
    // margin-right: 10px;
    // margin-bottom: 10px;
  }
}
.center{
  width: 100%;
  height: 60px;
  background: #fff;
  padding-top: 15px;

  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 9;
}
</style>
